import React from 'react';
import styles from './MyCourse.css';
import { Input,Icon,Spin,Button,Tabs,Timeline,Affix  } from 'antd';
const Search = Input.Search;
import logoImg from '../../assets/logo.png'
import {getcookie} from '../../utils/cookies'
import {HOMEPAGE_URL} from '../../utils/constants'
import catIcon from '../../assets/catIcon.jpg'
import searchIcon from '../../assets/searchIcon.png'
import arrowRight from '../../assets/arrowRight.png'
import pageRight from '../../assets/pageRight.png'
const  imgVideoPicUrl = "https://image.huanqiushuju.com/"
import headerBacMyCour from '../../assets/headerBacMyCour.png'
const TabPane = Tabs.TabPane;
// import 'antd/dist/antd.css'
class MyCourse extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      loading:false,unionid:'',
      arrowArr:[{arrowText:'首页',id:1,arrowIcon:searchIcon},
        {arrowText:'我的课程',id:2,arrowIcon:searchIcon},
      ],headImgUrl:"",nickName:"",curDate:-1,
    }
  }


  componentWillMount(){

    let unionid = getcookie("unionid")
    let headImgUrl = getcookie("headImgUrl")
    let nickName = getcookie("nickname")
    if (headImgUrl != undefined && nickName != undefined) {
      this.setState({nickName:nickName,headImgUrl:headImgUrl})
    } else {
      this.setState({nickName:'环球小伙伴',headImgUrl:catIcon})
    }
    // console.log("-------------headImgUrl",headImgUrl)
    // console.log("-------------nickName",nickName)

    // let unionid = "opkdCwGtoBRE8I8q1vvzui1benO0"

  if(unionid != null && unionid !=''){
    this.setState({unionid:unionid})
    this.props.dispatch({type:"mycourse/getCourseInfo",payload:{unionid}})
    this.props.dispatch({type:"mycourse/getYcoin",payload:{unionid}})
    }else {
    window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");

  }

    let curTime = new Date().getTime()
    let year = 1900+new Date(curTime).getYear()
    let month = "0" + (new Date(curTime).getMonth()+1)
    let date = "0" + (new Date(curTime).getDate())
    this.setState({curDate:year+"-"+month.substring(month.length-2,month.length) + "-"
    + date.substring(date.length-2,date.length)})
     // console.log("-------curTime",1900+new Date(curTime).getYear())

  }
  render(){
    let allMoreInfoArr = this.props.mycourse.getAllMoreInfoRes
    return (
      <div className={styles.allContent}>

        <div className={styles.contentBottom}>
          <div className={styles.contentFlex}>
            <Affix>
            <div className={styles.topHeader}>

              <div className={styles.headerLeft}>
                <img className={styles.logoImg} src={logoImg} alt="logo"/>
                <h3 className={styles.courseHead}>环球云逸课堂</h3>
                <Input
                  placeholder="输入搜索内容"
                  className={styles.searchInput}
                  style={{ width: 200 }}

                />
                <div className={styles.searchIconBac}>
                  <img className={styles.searchIcon} src={searchIcon} alt="搜索"/>
                </div>
              </div>

              <div className={styles.headerRight}>
                <div>我的课程</div>
                {/*<div>通知</div>*/}
                {/*<img className={styles.avateIcon} src={this.state.headImgUrl} alt="logo"/>*/}
              </div>

            </div>
            </Affix>


          </div>




        </div>
        <Affix className={styles.arrowTextSelf} offsetTop={48}>
        <div className={styles.arrowTextSelfWidth}>
        <div className={styles.arrowText}>
          {
            this.state.arrowArr.map((item)=>{
              return (
                <div key={item.arrowText} className={styles.arrowContent} onClick={()=>{
                  {/*console.log("---------------")*/}
                  this.props.dispatch({type:"mycourse/goBack",payload:{item}})
                }}>
                  <div className={item.id == 2?styles.arrowRightTextBlue:styles.arrowRightText}>{item.arrowText}
                    <img className={item.id == 2?styles.arrowRightNone:styles.arrowRight} src={arrowRight} alt=""/></div>

                </div>
              )
            })
          }

        </div>
        </div>
        </Affix>
        <div className={styles.headerBac}>
          <div className={styles.headerBacMyCour}  ></div>

          <div className={styles.headerBacInfo}>
            {/*<img className={styles.headerAvatar} src={this.data.headImgUrl != undefined?this.data.headImgUrl:catIcon} alt="头像"/>*/}
            <div className={styles.headerText}>
              {/*<text>{this.data.nickName != undefined?this.data.nickName:'环球小伙伴'}</text>*/}
              <div>
                {/*<text>共6门课程</text>*/}
                <text>我的逸贝：{this.props.mycourse.yCoin}</text>
                <div className={styles.todayTime}>
                  <text className={styles.todayTime}>{this.state.curDate}</text>
                </div>
              </div>
            </div>
          </div>


        </div>

        <div className={styles.myCourseTab}>

          <Tabs defaultActiveKey="1"  type="card"  className={styles.tabCard}>
            <TabPane tab="我的课程" key="1">
              <div className={styles.tabsOne}>
                <div className={styles.courseContent}>
                  <Spin spinning={this.state.loading}>
                    <div className={styles.contentMar}>

                      <div className={styles.courseShowContent}>
                        {
                          allMoreInfoArr.map((item)=>{
                            return (

                              <div className={styles.courseShow}  key={item.courseId} onClick={()=>{
                                {/*console.log("----------1")*/}
                                let courseId = item.courseId
                                this.props.dispatch({type:"mycourse/goToCourseDetail",payload:{courseId}})
                              }
                              }>
                                {/*<div className={styles.courseFlex_content}>*/}

                                  <img className={styles.courseImg} src={item.courseImgName} alt="课程图"/>

                                  <div className={styles.coursetext}>{item.courseName}</div>
                                  <div className={styles.courseText}>
                                    {/*<img className={styles.avateIcon} src={logoImg} alt="logo"/>*/}
                                    {/*<div className={styles.keyTeacher}>{item.keyTeacher}</div>*/}
                                  </div>
                                  <div className={styles.cashNumContent}>
                                    <text className={styles.cashNum}>￥{item.discountPrice}/{item.discountYcoin}贝</text>
                                    <text className={styles.learnNum}>{item.salesNum} <text className={styles.learnNumText}>人在学</text> </text>
                                  </div>
                                {/*</div>*/}

                              </div>
                            )
                          })
                        }
                      </div>
                    </div>




                  </Spin>

                </div>
              </div>


            </TabPane>
            {/*<TabPane tab="每日课表" key="2">*/}
              {/*<div className={styles.tabsTwo}>*/}
                {/*<Timeline>*/}
                  {/*<Timeline.Item>2015-09-01</Timeline.Item>*/}
                  {/*<Timeline.Item> 2015-09-01</Timeline.Item>*/}
                  {/*<Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">Technical testing 2015-09-01</Timeline.Item>*/}
                  {/*<Timeline.Item> 2015-09-01</Timeline.Item>*/}
                {/*</Timeline>*/}
              {/*</div>*/}

            {/*</TabPane>*/}
            {/*<TabPane tab="课程日历" key="3">*/}

              {/*<div className={styles.tabsOne}>*/}
                {/*3*/}
              {/*</div>*/}
            {/*</TabPane>*/}

          </Tabs>

        </div>


      </div>
    )
  }

}

export default MyCourse;
